<template>
  <div class="visitingCard">
    <el-row>
      <el-col
        :span="4"
        v-for="(item, index) in data"
        :key="index"
        @click="colclick(item.id, item.type, item.name)"
      >
        <el-card :body-style="{ padding: '10px' }">
          <img :src="item.img" class="image" />
          <div class="title">
            <div class="tetle-tag">
              <div class="span">{{ item.name }}</div>
              <template v-for="(zitem, zindex) in item.tag" :key="zindex">
                <el-tag>{{ zitem }}</el-tag></template
              >
              <div class="userinfo">{{ item.introduce }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <zzydialog :dialogVisible="dialogVisible" />
  </div>
</template>

<script >
import { defineComponent, onUnmounted } from "vue";
import { useStore } from "vuex";

import { dialogVisible, colclick, socket } from "@/components/zzydialog/utils";

import zzydialog from "@/components/zzydialog/src";

export default defineComponent({
  components: { zzydialog },
  setup() {
    const state = useStore();
    state.dispatch("main/getuserlists");
    const data = state.getters["main/getusers"];
    console.log(data);
    onUnmounted(() => {
      console.log("组建销毁了");
      if (socket) {
        socket.disconnect();
      }
    });

    //离线功能暂定
    // const onlinelists = computed(() => state.getters["ws/getonlinelists"]);
    // console.log(toRaw(onlinelists.value), "onlinelists");
    // const isonline = (id) => {
    //   toRaw(onlinelists.value).forEach((item) => {
    //     console.log(item);
    //   });
    //   console.log(id);
    // };
    return {
      data,
      dialogVisible,
      colclick,
      // isonline,
    };
  },
});
</script>

<style scoped lang="less">
.visitingCard {
  .image {
    width: 100%;
    display: block;
  }
  .title {
    margin-top: 25px;
    .tetle-tag {
      .span {
        text-align: center;
        margin-bottom: 10px;
      }
      .online {
        position: absolute;
      }
      .userinfo {
        margin-top: 10px;
      }
    }
  }
  /deep/.el-dialog__header {
    text-align: center;
  }
  /deep/.el-card {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  /deep/.el-dialog {
    height: 600px;
    .el-dialog__body {
      height: 350px;
      overflow: auto;
    }
  }
  /deep/.chat {
    .name {
      text-align: center;
    }
    .zinput {
      width: 100%;
      margin-top: 20px;
      position: absolute;
      left: 0px;
      bottom: 15px;
      .el-input--large {
        width: 80%;
        margin-left: 20px;
      }
      .el-button {
        height: 39px;
        margin-bottom: 2px;
        float: right;
        margin-right: 20px;
      }
    }
    //聊天窗口
    .message1 {
      margin-bottom: 40px;
      > span {
        padding: 10px;
        background: rgb(77, 188, 30);
        border-radius: 10px;
      }
    }
    .message2 {
      margin-bottom: 40px;
      text-align: right;
      > span {
        padding: 10px;
        background: #409eff;
        border-radius: 10px;
      }
    }
  }
}
</style>
